<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-input v-model="searchForm.school_name" placeholder="请输入学校名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="searchForm.shop_name" placeholder="请输入商户店铺名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="searchForm.is_special" placeholder="请选择类型" clearable>
            <el-option label="抽成商家" :value="1"></el-option>
            <el-option label="保障商家" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="search(true)">搜索</el-button>
          <el-button type="success" @click.stop="search">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="后台账号:">
                <span v-if="props.row.admin_account === null" style="color:#F56C6C">---</span>
                <span v-else>{{ props.row.admin_account }}</span>
              </el-form-item>
              <el-form-item label="后台名称:">
                <span v-if="props.row.admin_name === null" style="color:#F56C6C">---</span>
                <span v-else>{{ props.row.admin_name }}</span>
              </el-form-item>
              <el-form-item label="后台电话:">
                <span v-if="props.row.admin_phone === null" style="color:#F56C6C">---</span>
                <span v-else>{{ props.row.admin_phone }}</span>
              </el-form-item>
              <el-form-item label="后台状态:">
                <span v-if="props.row.admin_status === null" style="color: #F56C6C">---</span>
                <span v-else>
                  <el-tooltip :content="props.row.admin_status == 1 ? '正常': '禁用'" placement="top" :enterable="false">
                    <el-switch v-model="props.row.admin_status" :active-value="1" :inactive-value="0" @change="changeAdminStatus(props.row)">
                    </el-switch>
                  </el-tooltip>
                </span>
              </el-form-item>
              <el-form-item label="地址:">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="证件有效期:">
                <span>{{ props.row.cert_validity }}</span>
              </el-form-item>
              <el-form-item label="营业时间:">
                <span>{{ props.row.time_interval }}</span>
              </el-form-item>
              <el-form-item label="配送时间:">
                <span>{{ props.row.send_range }}</span>
              </el-form-item>
              <el-form-item label="银行卡号:">
                <span>{{ props.row.bank_no }}</span>
              </el-form-item>
              <el-form-item label="开户行:">
                <span>{{ props.row.bank_address }}</span>
              </el-form-item>
              <el-form-item label="预留电话:">
                <span>{{ props.row.bank_phone }}</span>
              </el-form-item>
              <el-form-item label="预留姓名:">
                <span>{{ props.row.bank_name }}</span>
              </el-form-item>
              <el-form-item label="拒绝理由:">
                <span>{{ props.row.remark }}</span>
              </el-form-item>

              <el-form-item label=" 营业 执照 照片:">
                <span>
                  <el-image style="width: 100px; height: 100px" :src="props.row.cert_pic" :preview-src-list="[props.row.cert_pic]">
                  </el-image>
                </span>
              </el-form-item>
              <el-form-item label="logo:">
                <span>
                  <el-image style="width: 100px; height: 100px" :src="props.row.logo" :preview-src-list="[props.row.logo]">
                  </el-image>
                </span>
              </el-form-item>
              <el-form-item label="经营许可证件照:">
                <span>
                  <el-image style="width: 100px; height: 100px" :src="props.row.allow_pic" :preview-src-list="[props.row.allow_pic]">
                  </el-image>
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="shop_name" label="商铺名称"></el-table-column>
        <el-table-column prop="school_name" label="所在学校"></el-table-column>
        <el-table-column prop="company_name" label="单位名称"></el-table-column>
        <el-table-column prop="legal_name" label="公司法人"></el-table-column>
        <el-table-column prop="sort" label="排序"></el-table-column>
        <el-table-column prop="is_special" label="类型">
          <template slot-scope="scope">
            {{specialName(scope.row.is_special)}}
          </template>
        </el-table-column>
        <el-table-column prop="proportion" label="抽成百分比"></el-table-column>
        <el-table-column prop="create_time" label="添加时间" width="150">
          <template slot-scope="scope">
            {{timeFormat(scope.row.create_time)}}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{statusName(scope.row.status)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-dropdown trigger="click" @command="handleCommand">
              <el-button type="primary">
                操作菜单<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="scope.row.status == 0" :command="{cmd:'changeStatus', id:scope.row.id,type:0}">审 核</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.status == 3" :command="{cmd:'changeStatus', id:scope.row.id,type:1}">启 用</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.status != 3" :command="{cmd:'changeStatus', id:scope.row.id,type:3}">禁 用</el-dropdown-item>
                <el-dropdown-item :command="{cmd:'sort', id:scope.row.id}">排 序</el-dropdown-item>
                <el-dropdown-item :command="{cmd:'changeSpecial', row:scope.row}">类型更改</el-dropdown-item>
                <el-dropdown-item :command="{cmd:'bindDor', id:scope.row.id}">宿舍绑定</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.admin_account === null" :command="{cmd:'addAdmin', id:scope.row.id}">添加后台账号</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.admin_account !== null" :command="{cmd:'editAdmin', id:scope.row.id}">编辑后台账号</el-dropdown-item>
                <el-dropdown-item v-if="scope.row.admin_account !== null" :command="{cmd:'editPwd', id:scope.row.id}">编辑后台密码</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.page"
          :page-sizes="[10,20,30,40]" :page-size="searchForm.limit" layout="total, sizes, prev, pager, next, jumper" :total="count">
        </el-pagination>
      </div>
      <el-dialog title="审核商户" :visible.sync="checkVisible" width="400px" :before-close="handleClose('checkForm')">
        <el-form ref="checkForm" :model="checkForm" label-width="100px" size="small" :rules="rules">
          <el-form-item label="是否通过" prop="status">
            <el-radio-group v-model="checkForm.status" @change="btnChange">
              <el-radio :label="1" border>审核通过</el-radio>
              <el-radio :label="2" border>审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="checkForm.status ==2" label="不通过理由" prop="remark">
            <el-input v-model="checkForm.remark" placeholder="请输入理由"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('checkVisible', 'checkForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('checkVisible','checkForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="商户类型" :visible.sync="specialVisible" width="400px" :before-close="handleClose('specialForm')">
        <el-form ref="specialForm" :model="specialForm" label-width="100px" size="small" :rules="rules">
          <el-form-item label="类型" prop="is_special">
            <el-radio-group v-model="specialForm.is_special">
              <el-radio :label="1" border>抽成商家</el-radio>
              <el-radio :label="2" border>保障商家</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="specialForm.is_special ==1" label="抽成比例" prop="proportion">
            <el-input-number v-model="specialForm.proportion" :precision="2" :step="0.1" :min="1" :max="100"></el-input-number>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('specialVisible', 'specialForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('specialVisible','specialForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="添加后台账号" :visible.sync="addAdminVisible" width="400px" :before-close="handleClose('addAdminForm')">
        <el-form ref="addAdminForm" :model="addAdminForm" label-width="100px" size="small" :rules="rules">
          <el-form-item label="账号" prop="account">
            <el-input v-model="addAdminForm.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="addAdminForm.pwd" show-password></el-input>
          </el-form-item>
          <el-form-item label="再次密码" prop="repwd">
            <el-input v-model="addAdminForm.repwd" show-password></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="addAdminForm.phone" maxlength="11" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="addAdminForm.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('addAdminVisible', 'addAdminForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('addAdminVisible','addAdminForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="编辑后台账号" :visible.sync="editAdminVisible" width="400px" :before-close="handleClose('editAdminForm')">
        <el-form ref="editAdminForm" :model="editAdminForm" label-width="100px" size="small" :rules="rules">
          <el-form-item label="账号" prop="account">
            <el-input v-model="editAdminForm.account"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="editAdminForm.phone" maxlength="11" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="editAdminForm.name"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('editAdminVisible', 'editAdminForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('editAdminVisible','editAdminForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="修改密码" :visible.sync="editPwdVisible" width="500px" :before-close="handleClose('editPwdForm')">
        <el-form ref="editPwdForm" :model="editPwdForm" label-width="80px" size="small" :rules="rules">
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="editPwdForm.pwd" show-password></el-input>
          </el-form-item>
          <el-form-item label="再次密码" prop="chkpwd">
            <el-input v-model="editPwdForm.chkpwd" show-password></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('editPwdVisible', 'editPwdForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('editPwdVisible','editPwdForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="绑定楼栋" :visible.sync="bindDorVisible" width="500px" :before-close="handleClose('bindForm')">
        <el-form ref="bindForm" :model="bindForm" label-width="80px" size="small" :rules="rules">
          <el-checkbox-group v-model="bindForm.chooseDorList">
            <el-checkbox v-for="item in dorList" :label="item.dor_id + ''" :key="item.dor_id">{{item.dor_name}}</el-checkbox>
          </el-checkbox-group>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="close('bindDorVisible', 'bindForm')" size="small">取 消</el-button>
          <el-button type="primary" @click="send('bindDorVisible','bindForm')" size="small">确 定</el-button>
        </span>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>
<script>
import { formatDate } from '@/untils/common.js'
import { shopList, editShop, shopSort, changeSpecial, addAdmin, storeAdminOnly, editAdmin, editPwdAdmin, changeAdminStatus, getBindDor, bindDor } from '@/network/api.js'

export default {
  name: 'store',
  data() {
    return {
      searchForm: {
        page: 1,
        limit: 10,
        school_name: '',
        shop_name: '',
        is_special: ''
      },
      count: 0, // 总记录数
      table: [],
      checkForm: {
        id: 0,
        status: 1,
        remark: ''
      },
      checkVisible: false, // 审核表单
      specialForm: {
        id: 0,
        is_special: 1,
        proportion: 10
      },
      specialVisible: false, // 类型更改表单
      addAdminForm: {
        id: 0,
        account: '',
        name: '',
        phone: '',
        pwd: '',
        repwd: ''
      },
      addAdminVisible: false, // 添加管理员表单
      editAdminForm: {
        id: 0,
        account: '',
        name: '',
        phone: ''
      },
      editAdminVisible: false, // 添加管理员表单
      editPwdForm: {
        id: 0,
        pwd: '',
        chkpwd: ''
      },
      editPwdVisible: false,
      bindForm: {
        id: 0,
        chooseDorList: []
      },
      dorList: [],
      bindDorVisible: false,
      rules: {
        status: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
        is_special: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        remark: [
          {
            validator: (rule, value, callback) => {
              if (this.checkForm.status === 2 && value === '') {
                callback(new Error('请输入理由'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        repwd: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.addAdminForm.pwd) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        chkpwd: [
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'))
              } else if (value !== this.editPwdForm.pwd) {
                callback(new Error('两次输入密码不一致!'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.search()
  },
  computed: {
    statusName() {
      return status => {
        switch (status) {
          case 0:
            return '未审核'
          case 1:
            return '审核通过'
          case 2:
            return '审核未通过'
          case 3:
            return '已禁用'
        }
      }
    },
    specialName() {
      return isSpecial => {
        switch (isSpecial) {
          case 1:
            return '抽成商家'
          case 2:
            return '保障商家'
        }
      }
    },
    timeFormat() {
      return time => {
        return formatDate(time)
      }
    }
  },
  methods: {
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await shopList(this.searchForm)
        this.table = rtn.data.data
        this.count = rtn.data.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    // 修改状态
    changeStatus(id, status) {
      switch (status) {
        case 0: // 审核是否通过
          this.checkForm.id = id
          this.checkVisible = true
          break
        case 1: // 启用
          this.$confirm('确定要启用吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(async () => {
              try {
                const formdata = {
                  id,
                  status: 1,
                  remark: ''
                }
                await editShop(formdata)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
            })
            .catch(() => {})
          break
        case 3: // 禁用
          this.$confirm('确定要禁用吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(async () => {
              try {
                const formdata = {
                  id,
                  status: 3,
                  remark: ''
                }
                await editShop(formdata)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
            })
            .catch(() => {})
      }
    },
    // 类型更改
    changeSpecial(row) {
      this.specialForm.id = row.id
      this.specialForm.proportion = 10
      this.specialVisible = true
    },
    // 商户排序
    sort(id) {
      this.$prompt('请输入新的排序', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[1-9][0-9]{0,}$/,
        inputErrorMessage: '不正确的排序'
      })
        .then(async ({ value }) => {
          try {
            const formdata = {
              id,
              sort: value
            }
            await shopSort(formdata)
            this.search()
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {})
    },
    btnChange(value) {
      this.checkForm.remark = ''
    },
    // 添加后台管理员
    addAdmin(id) {
      this.addAdminForm.id = id
      this.addAdminVisible = true
    },
    // 编辑后台管理员
    async editAdmin(id) {
      try {
        const rtn = await storeAdminOnly({ id })
        this.editAdminVisible = true
        this.$nextTick(() => {
          this.editAdminForm = rtn.data
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    editPwd(id) {
      this.editPwdForm.id = id
      this.editPwdVisible = true
    },
    async changeAdminStatus(row) {
      try {
        await changeAdminStatus({ id: row.id, status: row.admin_status })
      } catch (e) {
        row.admin_status = row.admin_status === 1 ? 0 : 1
        this.$message.error(e.message)
      }
    },
    async bindDor(id) {
      try {
        const rtn = await getBindDor({ id })
        this.bindDorVisible = true
        this.$nextTick(() => {
          this.bindForm.id = id
          this.bindForm.chooseDorList = rtn.data.chooseDorList
          this.dorList = rtn.data.dorList
        })
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    handleCommand(command) {
      switch (command.cmd) {
        case 'changeStatus':
          this.changeStatus(command.id, command.type)
          break
        case 'sort':
          this.sort(command.id)
          break
        case 'changeSpecial':
          this.changeSpecial(command.row)
          break
        case 'addAdmin':
          this.addAdmin(command.id)
          break
        case 'editAdmin':
          this.editAdmin(command.id)
          break
        case 'editPwd':
          this.editPwd(command.id)
          break
        case 'bindDor':
          this.bindDor(command.id)
          break
      }
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose(formName) {
      return done => {
        this.$refs[formName].resetFields()
        done()
      }
    },
    // 取消按钮
    close(visibleName, formName) {
      this.$refs[formName].resetFields()
      this[visibleName] = false
    },
    send(visibleName, formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          switch (formName) {
            case 'checkForm': // 添加表单
              try {
                await editShop(this.checkForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
            case 'specialForm': // 添加表单
              try {
                await changeSpecial(this.specialForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
            case 'addAdminForm': // 添加后台管理员
              try {
                await addAdmin(this.addAdminForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
            case 'editAdminForm': // 编辑后台管理员
              try {
                await editAdmin(this.editAdminForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
            case 'editPwdForm': // 编辑后台管理员密码
              try {
                await editPwdAdmin(this.editPwdForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
            case 'bindForm': // 绑定楼栋
              try {
                await bindDor(this.bindForm)
                this.close(visibleName, formName)
                this.search()
              } catch (e) {
                this.$message.error(e.message)
              }
              break
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
